<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item label="最近使用日期：">
                        <el-date-picker v-model="queryParams.updateTime"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="最近使用日期" />
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-date-picker  v-model="queryParams.createTime"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="创建日期" />
                    </el-form-item>
                    <el-form-item label="烫金版查询：" prop="gildingName">
                        <el-input v-model="queryParams.gildingName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>

        <el-card shadow="never">
            <template #header>
                <div class="mb2" style="font-size: 18px;"><strong>烫金版总数：{{ total || 0 }}</strong></div>
            </template>
            <el-table ref="multipleTableRef" v-loading="loading" :data="dataList" stripe>
                <el-table-column label="最近使用日期" prop="updateTime" align="center"></el-table-column>
                <el-table-column label="创建日期" prop="createTime" align="center"></el-table-column>
                <el-table-column label=" 创建人" prop="createByName" align="center"></el-table-column>
                <el-table-column label="烫金版名称" prop="gildingName" align="center"></el-table-column>
                <el-table-column label="烫金版编号" prop="gildingCode" align="center"></el-table-column>
                <el-table-column label="烫金版详情" prop="customerName" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="getVersionDetailsShow(scope.row)">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="当前所属库位" prop="productStyle" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.useStatus == 2" class="success">使用中</div>
                        <div v-else class="">{{ hot_stamping_version.filter((item: any) =>
                            item.value ==
                            scope.row.warehouseLocation)[0]?.label }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="烫金版状态" prop="number" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="getStatusDetailsShow(scope.row)">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="220px">
                    <template #default="scope">
                        <el-tooltip content="库位编辑" placement="top">
                            <el-button link @click="openWarehouseLocation(scope.row)" :style="{ fontSize: '15px' }"
                                type="success" icon="EditPen"></el-button>
                        </el-tooltip>
                        <el-tooltip content="打印">
                            <el-button link :style="{ fontSize: '15px' }" type="primary" icon="Platform"></el-button>
                        </el-tooltip>
                        <el-tooltip content="报废">
                            <el-button @click="handleScrap(scope.row)" link :style="{ fontSize: '15px' }" type="danger"
                                icon="Delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getDesignerList" />
        </el-card>

        <versionDetails :visible="versionDetailsShow" :initList="dataObj" @close="versionDetailsShow = false" />
        <statusDetails :visible="statusDetailsShow" :initList="dataObj" @close="statusDetailsShow = false"
            @submit="statusDetailsShow = false" />

        <el-dialog v-model="warehouseLocationShow" title="更改库位" align-center width="20%"
            @close="warehouseLocationShow = false">

            <el-form :model="form">
                <el-form-item label="选择新库位信息：">
                    <el-select v-model="form.warehouseLocation" placeholder="请选择新库位信息">
                        <el-option v-for="dict in hot_stamping_version" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="form.warehouseLocation = '', warehouseLocationShow = false">取 消</el-button>
                    <el-button type="primary" @click="handleWarehouseLocationSubmit">确 认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { type FormInstance, TableInstance, TabsPaneContext } from 'element-plus';
import { getgildingInfoListApi, scrapGildingInfoApi, updateGildingInfoApi } from '@/api/sj/productManagement/hotStampingVersion/index';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'

import versionDetails from './components/versionDetails.vue';
import statusDetails from './components/statusDetails.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hot_stamping_version } = toRefs<any>(proxy?.useDict('hot_stamping_version'));
const queryFormRef = ref<FormInstance>();
const multipleTableRef = ref<TableInstance>()


const total = ref(0);

const data = reactive<any>({
    queryParams: {
        gildingName: '',
        updateTime: '',
        createTime: '',
        pageSize: 10,
        pageNum: 1
    }
});


const { queryParams } = toRefs(data);
const packageOrderList = ref<any>();
const totalData = ref(0);
const loading = ref(false);

const dataList = ref<any>([])
const versionDetailsShow = ref(false);
const statusDetailsShow = ref(false);
const dataObj = ref<any>({})
const warehouseLocationShow = ref(false);

const form = reactive({
    warehouseLocation: '',
})

/** 查询详情 */
const getVersionDetailsShow = (row: any) => {
    dataObj.value = row
    versionDetailsShow.value = true;
};

/** 状态详情 */
const getStatusDetailsShow = (row: any) => {
    dataObj.value = row
    statusDetailsShow.value = true;
};

/** 报废处理 */
const handleScrap = (row: any) => {
    console.log(row)
    ElMessageBox.confirm(
        '烫金版报废后，需要手动去把此烫金版报废，此烫金版在报废后二维码无法显示任何信息，后续烫金版定稿时无法找到此条烫金版名称，您确定要这么做吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            try {
                const { code } = await scrapGildingInfoApi(row.id)

                if (code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '报废成功!',
                    })
                    getDesignerList();
                }

            } catch (error) {

            }

        })
        .catch(() => {

        })
};

/** 打开库位编辑 */
const openWarehouseLocation = (row: any) => {
    dataObj.value = row
    warehouseLocationShow.value = true;
};

/** 库位确定按钮 */
const handleWarehouseLocationSubmit = async () => {
    if (!form.warehouseLocation) return ElMessage({
        type: 'error',
        message: '请选择库位信息!',
    })

    try {
        const { code } = await updateGildingInfoApi({
            id: dataObj.value.id,
            ...form
        })

        if (code === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功!',
            })
            form.warehouseLocation = ''
            warehouseLocationShow.value = false;
            getDesignerList();
        }
    } catch (error) {

    }
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getDesignerList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const getDesignerList = async () => {
    loading.value = true;
    try {
        const { code, data } = await getgildingInfoListApi(queryParams.value);

        if (code === 200) {
            total.value = data.total
            dataList.value = data.dataPage.records
        }

        loading.value = false;
    } catch (error) {
        loading.value = false;
    }
};



onMounted(() => {
    getDesignerList();
});

</script>
<style lang="scss" scoped></style>